<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>

<!--
      v-bind
     如何改变默认展示的图片
        1.  原生js实现   img节点对象   访问src属性
        2.  vue环境中   v-bind 指令完成数据的动态操作   通过v-bind指令可以实现动态操作标签属性

    v-bind:属性名=""    简化   ->  :属性名=""
-->
<div id="app">
<!--    <p><img v-bind:src="img" alt="这是一张图片"></p>-->
    <p><img :src="img" alt="这是一张图片"></p>
    <p>
        <button @click="pre">上一张</button>
        <button @click="next">下一张</button>
    </p>
</div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            imgs: ['1.png', '2.png', '3.png'],
            img: '1.png', // 0  index
            index: 0
        },
        methods: {
            pre() {
                this.index = this.index - 1
                if (this.index < 0){
                    this.index = this.imgs.length-1
                }
                console.log(this.index)
                this.img = this.imgs[this.index]

            },
            next() {
                this.index = this.index + 1
                if (this.index>=this.imgs.length){
                    this.index = 0
                }
                console.log(this.index)
                this.img = this.imgs[this.index]
            }
        }
    })
</script>
</body>
</html>